<template>
  <div class="container">
    <HomeTOP :mvList="mvList"></HomeTOP>
    <HomeList :list="list">
      <template slot="topic"><p>推荐榜单</p></template>
    </HomeList>
    <HomeList :list="artistList">
      <template slot="topic"><p>推荐歌星</p></template>
      <template slot="songList" slot-scope="props">
        <div class="song_list">
          <div class="song_item" v-for="each in props.data" :key="each.id">
            <div>
              <img :src="each.picUrl" alt="" />
            </div>
            <div class="item_desc" style="height: auto">
              {{ each.name }}
            </div>
          </div>
        </div>
      </template>
    </HomeList>
  </div>
</template>

<script>
import HomeTOP from "../../components/Home-top";
import HomeList from "../../components/HomeList";
import {
  getToplist,
  getToplistArtist,
  getPersonalizedMv,
} from "../../http/Home/home";
export default {
  components: {
    HomeTOP,
    HomeList,
  },
  data() {
    return {
      list: [],
      artistList: [],
      mvList: [],
    };
  },
  async mounted() {
    let res = await getToplist();
    this.list = res.data.list.slice(0, 10);
    this.res = res.data.list;
    let artistRes = await getToplistArtist({ type: 1 });
    this.artistRest = artistRes.data.list.artists;
    this.artistList = artistRes.data.list.artists.slice(0, 10);
    let mvRes = await getPersonalizedMv();
    this.mvList = mvRes.data.result;
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow-y: scroll;
}
@import url("../../assets/public/common.less");
</style>